import React, { useRef } from 'react';
import { useFrame } from '@react-three/fiber';
import { Text, Box, Cylinder, Sphere, Plane } from '@react-three/drei';
import * as THREE from 'three';

interface SphericalCafeEnvironmentProps {
  radius?: number;
}

export const SphericalCafeEnvironment: React.FC<SphericalCafeEnvironmentProps> = ({ 
  radius = 25 
}) => {
  const envRef = useRef<THREE.Group>(null);

  useFrame((state) => {
    if (envRef.current) {
      // Very subtle environment animation
      envRef.current.rotation.y += 0.0002;
    }
  });

  return (
    <group ref={envRef}>
      {/* Sky Sphere - Interior */}
      <Sphere args={[radius]} position={[0, 0, 0]}>
        <meshBasicMaterial 
          color="#87CEEB"
          side={THREE.BackSide}
          transparent
          opacity={0.9}
        />
      </Sphere>

      {/* Ground Circle - Large flat area */}
      <Cylinder 
        args={[radius - 2, radius - 2, 0.2]} 
        position={[0, -radius + 0.1, 0]}
        receiveShadow
      >
        <meshStandardMaterial 
          color="#8B7355" 
          roughness={0.8}
        />
      </Cylinder>

      {/* Central Coffee Shop - Always visible */}
      <group position={[0, -radius + 4, 0]}>
        {/* Main Building */}
        <Box
          args={[12, 8, 6]}
          castShadow
          receiveShadow
        >
          <meshStandardMaterial 
            color="#D2B48C" 
            roughness={0.8}
          />
        </Box>

        {/* Detailed Roof */}
        <Box
          position={[0, 4.5, 0]}
          args={[14, 1, 7]}
          castShadow
        >
          <meshStandardMaterial color="#8B4513" />
        </Box>

        {/* Large Sign */}
        <group position={[0, 6, 3.1]}>
          <Box args={[8, 2, 0.3]} castShadow>
            <meshStandardMaterial color="#FFF8DC" />
          </Box>
          <Text
            position={[0, 0, 0.2]}
            fontSize={0.8}
            color="#8B4513"
            anchorX="center"
            anchorY="middle"
          >
            ☕ 360° 咖啡体验馆 ☕
          </Text>
        </group>

        {/* Multiple Entrances around the building */}
        {Array.from({ length: 4 }, (_, i) => {
          const angle = (i * Math.PI) / 2;
          const x = Math.cos(angle) * 6.1;
          const z = Math.sin(angle) * 3.1;
          
          return (
            <group key={i} position={[x, -2, z]} rotation={[0, -angle, 0]}>
              {/* Door */}
              <Box args={[1.5, 4, 0.2]} castShadow>
                <meshStandardMaterial color="#654321" />
              </Box>
              {/* Door Handle */}
              <Sphere position={[0.5, 0, 0.15]} args={[0.06]}>
                <meshStandardMaterial color="#FFD700" metalness={0.9} />
              </Sphere>
              {/* Window above door */}
              <Box position={[0, 1.5, 0.1]} args={[1, 0.8, 0.05]}>
                <meshStandardMaterial 
                  color="#87CEEB" 
                  transparent 
                  opacity={0.7}
                />
              </Box>
            </group>
          );
        })}

        {/* Large Windows all around */}
        {Array.from({ length: 8 }, (_, i) => {
          const angle = (i * Math.PI) / 4;
          const x = Math.cos(angle) * 6.1;
          const z = Math.sin(angle) * 3.1;
          
          return (
            <group key={i} position={[x, 1, z]} rotation={[0, -angle, 0]}>
              <Box args={[2.5, 3, 0.1]}>
                <meshStandardMaterial 
                  color="#87CEEB" 
                  transparent 
                  opacity={0.4}
                  roughness={0.0}
                  metalness={0.9}
                />
              </Box>
              {/* Window Frame */}
              <Box position={[0, 0, 0.05]} args={[2.7, 3.2, 0.05]}>
                <meshStandardMaterial color="#654321" />
              </Box>
            </group>
          );
        })}
      </group>

      {/* Circular Seating Areas - Multiple rings */}
      {Array.from({ length: 3 }, (ringIndex) => {
        const ringRadius = 8 + ringIndex * 6;
        const tableCount = 6 + ringIndex * 2;
        
        return Array.from({ length: tableCount }, (_, i) => {
          const angle = (i * Math.PI * 2) / tableCount;
          const x = Math.cos(angle) * ringRadius;
          const z = Math.sin(angle) * ringRadius;
          
          return (
            <group key={`ring-${ringIndex}-table-${i}`} position={[x, -radius + 0.2, z]}>
              {/* Table */}
              <Cylinder
                position={[0, 0.5, 0]}
                args={[0.8, 0.8, 0.08]}
                castShadow
                receiveShadow
              >
                <meshStandardMaterial 
                  color="#8B4513" 
                  roughness={0.3}
                />
              </Cylinder>

              {/* Table Base */}
              <Cylinder
                position={[0, 0, 0]}
                args={[0.1, 0.1, 1]}
                castShadow
              >
                <meshStandardMaterial color="#654321" />
              </Cylinder>

              {/* Chairs around table */}
              {Array.from({ length: 3 }, (_, chairIndex) => {
                const chairAngle = (chairIndex * Math.PI * 2) / 3;
                const chairX = Math.cos(chairAngle) * 1.3;
                const chairZ = Math.sin(chairAngle) * 1.3;
                
                return (
                  <group 
                    key={chairIndex} 
                    position={[chairX, 0, chairZ]}
                    rotation={[0, chairAngle + Math.PI, 0]}
                  >
                    {/* Chair Seat */}
                    <Box position={[0, 0.4, 0]} args={[0.4, 0.05, 0.4]} castShadow>
                      <meshStandardMaterial color="#8B4513" />
                    </Box>
                    {/* Chair Back */}
                    <Box position={[0, 0.7, -0.18]} args={[0.4, 0.5, 0.05]} castShadow>
                      <meshStandardMaterial color="#8B4513" />
                    </Box>
                    {/* Chair Legs */}
                    {[[-0.15, -0.15], [0.15, -0.15], [-0.15, 0.15], [0.15, 0.15]].map((legPos, legIndex) => (
                      <Cylinder
                        key={legIndex}
                        position={[legPos[0], 0.2, legPos[1]]}
                        args={[0.02, 0.02, 0.4]}
                        castShadow
                      >
                        <meshStandardMaterial color="#654321" />
                      </Cylinder>
                    ))}
                  </group>
                );
              })}

              {/* Coffee service on table */}
              <group position={[0, 0.55, 0]}>
                {Array.from({ length: 2 }, (_, cupIndex) => {
                  const cupAngle = (cupIndex * Math.PI);
                  const cupX = Math.cos(cupAngle) * 0.3;
                  const cupZ = Math.sin(cupAngle) * 0.3;
                  
                  return (
                    <group key={cupIndex} position={[cupX, 0, cupZ]}>
                      <Cylinder args={[0.04, 0.035, 0.06]} castShadow>
                        <meshStandardMaterial color="#FFF8DC" />
                      </Cylinder>
                      <Cylinder position={[0, 0.01, 0]} args={[0.038, 0.038, 0.02]}>
                        <meshStandardMaterial color="#8B4513" />
                      </Cylinder>
                    </group>
                  );
                })}
              </group>
            </group>
          );
        });
      })}

      {/* Decorative Elements scattered around the sphere */}
      
      {/* Palm Trees around the perimeter */}
      {Array.from({ length: 8 }, (_, i) => {
        const angle = (i * Math.PI * 2) / 8;
        const x = Math.cos(angle) * (radius - 8);
        const z = Math.sin(angle) * (radius - 8);
        
        return (
          <group key={`tree-${i}`} position={[x, -radius + 2, z]}>
            {/* Trunk */}
            <Cylinder position={[0, 2, 0]} args={[0.3, 0.3, 4]} castShadow>
              <meshStandardMaterial color="#8B4513" roughness={0.8} />
            </Cylinder>
            {/* Palm Leaves */}
            {Array.from({ length: 8 }, (_, leafIndex) => {
              const leafAngle = (leafIndex * Math.PI * 2) / 8;
              const leafX = Math.cos(leafAngle) * 2;
              const leafZ = Math.sin(leafAngle) * 2;
              
              return (
                <Box
                  key={leafIndex}
                  position={[leafX, 4.5, leafZ]}
                  args={[3, 0.1, 0.8]}
                  rotation={[0, leafAngle, Math.PI / 6]}
                  castShadow
                >
                  <meshStandardMaterial color="#228B22" />
                </Box>
              );
            })}
          </group>
        );
      })}

      {/* Floating Ambient Elements */}
      {Array.from({ length: 20 }, (_, i) => {
        const angle = (i * Math.PI * 2) / 20;
        const distance = 15 + Math.random() * 8;
        const height = -5 + Math.random() * 10;
        const x = Math.cos(angle) * distance;
        const z = Math.sin(angle) * distance;
        
        return (
          <Text
            key={`ambient-${i}`}
            position={[x, height, z]}
            fontSize={0.3}
            color="#FFB6C1"
            anchorX="center"
            anchorY="middle"
            rotation={[0, -angle + Math.PI, 0]}
          >
            ☕
          </Text>
        );
      })}

      {/* Wall Decorations - Paintings and Posters */}
      {Array.from({ length: 12 }, (_, i) => {
        const angle = (i * Math.PI * 2) / 12;
        const x = Math.cos(angle) * (radius - 1);
        const z = Math.sin(angle) * (radius - 1);
        const y = -5 + (i % 3) * 3;
        
        return (
          <group key={`wall-deco-${i}`} position={[x, y, z]} rotation={[0, -angle + Math.PI, 0]}>
            <Box args={[2, 1.5, 0.1]} castShadow>
              <meshStandardMaterial 
                color={['#FF69B4', '#87CEEB', '#98FB98', '#DDA0DD'][i % 4]}
              />
            </Box>
            <Text
              position={[0, 0, 0.1]}
              fontSize={0.2}
              color="#FFFFFF"
              anchorX="center"
              anchorY="middle"
            >
              {['Love', 'Romance', 'Coffee', 'Dreams'][i % 4]}
            </Text>
          </group>
        );
      })}

      {/* Hanging Lights from ceiling */}
      {Array.from({ length: 15 }, (_, i) => {
        const angle = (i * Math.PI * 2) / 15;
        const distance = 5 + (i % 3) * 4;
        const x = Math.cos(angle) * distance;
        const z = Math.sin(angle) * distance;
        
        return (
          <group key={`light-${i}`} position={[x, radius - 8, z]}>
            {/* Light Cord */}
            <Cylinder position={[0, -2, 0]} args={[0.01, 0.01, 4]} castShadow>
              <meshStandardMaterial color="#2F4F4F" />
            </Cylinder>
            {/* Light Bulb */}
            <Sphere position={[0, -4, 0]} args={[0.2]} castShadow>
              <meshStandardMaterial 
                color="#FFD700"
                emissive="#FFD700"
                emissiveIntensity={0.5}
              />
            </Sphere>
            {/* Point Light */}
            <pointLight
              position={[0, -4, 0]}
              intensity={0.5}
              distance={8}
              color="#FFD700"
            />
          </group>
        );
      })}

    </group>
  );
};